<!-- 报表统计 -->
<template>
  <div class="navigation" :style="isBaseVersion ? 'justify-content: flex-start;padding-left: 30px;' : ''">
    <div class="navigation-content">
      <div style="height: max-content;display: flex;gap: 40px;">
      <div v-for="(items, index) in titleList" :key="index" class="menu-column" :class="getColumnClass(items)">
        <div class="menu-header">{{ items }}</div>
        <div class="menu-body">
          <div class="" v-for="r,i in routeList[items]" :key="i">
            <div v-for="item,ind in r.children" :key="item.path" class="menu-item" @click="routeClick(item)">
              <div class="yuan"></div>
              {{ item.title }}
            </div>
            <a-divider v-if="i < routeList[items].length - 1" />
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import subMenu from '../../menu/Sidebar/submenu'
import { getAction } from '@/api/manage'
import Vue from 'vue'
import { handlePermissions, handlePagePermissions, handleOtherPerms, handleIsBaseVersion } from '@/utils'
export default {
  components: {},
  name: 'reportStatistics',
  props: {},
  watch: {
    '$store.getters.openAccountValue'(val) {
      this.openAccount = val
      if (val === 3) {
        this.isOpenAccount = true
      } else {
        this.isOpenAccount = false
      }
    },
  },
  data() {
    return {
      path: '/reportStatistics',
      routeList: [],
      titleList: [],
      dialogVisible: false,
      isOpenAccount: false, // 开账状态
      openAccount: 0, // 开账状态
      printPermissions: false, //打印模板设置权限
      isBaseVersion: false,
      baseVersionPages: [
        '/reportStatistics/financeReport/salesOrderSummary', //销售单汇总表
        '/reportStatistics/salesReport/salesDtails', //销售明细查询
        '/reportStatistics/financeReport/salesDiscount', //销售优惠汇总表
        '/reportStatistics/salesReport/statisticsByCustomer', //销售统计(按客户)
        '/reportStatistics/salesReport/salesStatisticsByCommodity', //销售统计(按商品)
        '/reportStatistics/salesReport/statisticsBySalesman', //销售统计(按经手人)
        '/reportStatistics/paymentReport/billQuery', //单据查询
      ],
    }
  },
  computed: {
    cashPermissions() {
      return handlePermissions('现金银行统计表')
    },
    titleToImage() {
      return {
        
      };
    },
  },
  mounted() {
    this.isBaseVersion = handleIsBaseVersion()
    this.printPermissions = handleOtherPerms('打印模板设置')
    this.openAccount = this.$store.getters.openAccountValue
    if (this.openAccount === 3) {
      this.isOpenAccount = true
    } else {
      this.isOpenAccount = false
    }
    let data = this.getMenuData()
    console.log('data',JSON.parse(JSON.stringify(data)))
    let tList = [] //第二层标题
    let rList = {} //第二次路径
    if (data && data.children && data.children.length > 0) {
      //配置数据
      for (let index = 0; index < data.children.length; index++) {
        const element = data.children[index]
        let title = element.meta.title
        tList.push(title)
        let children = element.children || []
        let cList = [] //存放第三层路径
        for (let i = 0; i < children.length; i++) {
          const e = children[i]
          if (!e.hidden) {
            let transformedChildren = []
            if (e.children && e.children.length > 0) {
              transformedChildren = e.children.map((child) => {
                return (!this.isBaseVersion || this.baseVersionPages.includes(child.path)) ? {
                  title: child.meta.title,
                  path: child.path,
                } : undefined
              }).filter(el => el)
            }
            if (transformedChildren.length) {
              cList.push({
                title: e.meta.title,
                path: e.path,
                icon: e.meta.icon,
                children: transformedChildren,
              })
            }
          }
        }
        rList[title] = cList
      }

      // 必用版时将库存报表中的所有数据移动到销售报表中
      if (this.isBaseVersion) {
        rList['销售报表'].push(...rList['库存报表']);
        rList['库存报表'] = [];
      }

      this.titleList = tList
      this.routeList = rList
      console.log('this.routeList',JSON.parse(JSON.stringify(this.routeList)))
    }
    //  else {
    //   //本地数据
    //   this.titleList = subMenu.routeMap[this.path].titles
    //   this.routeList = subMenu.routeMap[this.path]
    // }
 
    if (this.isBaseVersion) {
      this.titleList = this.titleList.filter(el => this.routeList[el].length)
    }
  },
  methods: {
    getMenuData() {
      let arr = this.$store.state.user.permissionList
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index]
        if (element.path == this.path) {
          return element
        }
      }
    },
    routeClick(item) {
      // console.log('item.path', item.path)
      this.printPermissions = handleOtherPerms('打印模板设置')
      if (item.path == this.$route.path) {
        this.$emit('pathChange', 0)
        return
      }
      // 账套过期不允许进入其他页面
      if (Vue.ls.get('account-no-money')) {
        return this.$elMessage.warning('续费未完成不能操作!')
      }
      if (!this.isOpenAccount) {
        // 基本信息的资料都可以操作
        if (
          [
            '/initialAccountSetup',
            '/baseInfomation/material/commodityInfo',
            '/baseInfomation/material/transactionCompanyInfo',
            '/baseInfomation/material/staffInfo',
            '/baseInfomation/material/warehouseInfo',
            '/baseInfomation/material/logisticsInfo',
            '/baseInfomation/material/accountInfo',
          ].includes(item.path)
        ) {
          // 未选择开账不能进入基本信息页面
          if (this.openAccount === 0) {
            return this.$elMessage.warning('请先选择开账方式!')
          }
          return this.toPath(item)
        } else if (
          [
            '/baseInfomation/beginningOfPeriod/inventoryEntry',
            '/baseInfomation/beginningOfPeriod/arAndapEntry',
            '/baseInfomation/beginningOfPeriod/accountBalanceEntry',
          ].includes(item.path)
        ) {
          // 期初菜单需要处理
          if (this.openAccount === 0) {
            return this.$elMessage.warning('请先选择开账方式!')
          }
        } else {
          return this.$elMessage.warning('未开账不能操作!')
        }
      }
      if (
        [
          '/baseInfomation/printSetting/printSet',
          '/baseInfomation/printSetting/printSetRecord',
          '/baseInfomation/printSetting/printSetStatic',
          '/baseInfomation/printSetting/printSetStock',
          '/baseInfomation/printSetting/printSetSettlement',
          '/baseInfomation/printSetting/templateSet',
          '/baseInfomation/printSetting/library',
        ].includes(item.path) &&
        !this.printPermissions
      ) {
        return this.$elMessage.warning('未拥有打印模板设置权限！!')
      }
      // 现金银行统计表拦截是否有录入权限
      if (item.path == '/reportStatistics/financeReport/cashBankStatistics' && !this.cashPermissions.LuRu) {
        return this.$elMessage.warning('没有权限！')
      }
      const titleMappings = {
        '销售毛利明细查询': '销售毛利明细',
        '商品进销存明细表': '商品进销存表',
        // 在此处添加其他需要转换的标题映射
      };
      const permissionTitle = titleMappings[item.title] || item.title;
      //没有当前页面权限
      if (!handlePagePermissions(permissionTitle)) {
        return this.$elMessage.warning('没有权限！')
      }
      this.toPath(item)
    },
    toPath(item) {
      let path = item.path
      if (path == '/otherWarehouseType') {
        this.$emit('pathChange', 1)
      } else if (path == '/initialAccountSetup') {
        this.$emit('pathChange', 3)
      } else if (path == '/otherDeliveryType') {
        this.$emit('pathChange', 2)
      } else {
        this.$emit('pathChange', 0)
        this.$router.push(
          {
            path: item.path,
          },
          () => {},
          () => {}
        )
      }
    },
    getColumnClass (title) {
      switch (title) {
        case '销售报表':
          return 'sales'
        case '采购报表':
          return 'purchase'
        case '库存报表':
          return 'inventory'
        case '财务报表':
          return 'finance'
        default:
          return ''
      }
    },
  },
}
</script>

<style lang="less" scoped>
/* 导航容器 */
.navigation {
  height: 100%;
  padding-bottom: 16px;
  background-color: #dbdbdb;
  display: flex;
  align-items: center;
  justify-content: center;

  .navigation-content {
    display: flex;
    gap: 40px;
    padding: 20px;
    overflow: auto;
    align-items: center;
    height: 100%;

    .menu-column {
      width: 280px;
      min-width: max-content;
      background-color: #fff;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 10px 10px 4px 4px;

      .menu-header {
        height: 65px;
        line-height: 65px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        border-radius: 10px 10px 0px 0px;
      }

      .menu-body {
        padding: 30px;

        .menu-item {
          cursor: pointer;
          display: flex;
          align-items: baseline;
          font-size: 15px;
          color: #666666;
          // padding: 7px 0;
          margin-bottom: 13px;
        }
        // 最后一个menu-item的下边距
        .menu-item:last-child {
          margin-bottom: 0;
        }

        /* 分割线样式 */
        .ant-divider {
          margin: 15px 0;
          background: #E8E8E8;
        }
      }
    }
  }
}

/* 各个统计的头部颜色 */
.sales .menu-header {
  background: linear-gradient( 180deg, #3EA1FF 0%, #005EB7 100%);
}

.purchase .menu-header {
  background: linear-gradient( 180deg, #4BEAB3 0%, #00A7A0 100%);
}

.inventory .menu-header {
  background: linear-gradient( 180deg, #FBAD19 0%, #FF6200 100%);
}

.finance .menu-header {
  background: linear-gradient( 180deg, #FC6C6C 0%, #FD3131 100%);
}
.yuan{
  width: 10px;
  height: 10px;
  // background: linear-gradient( 180deg, #FC6C6C 0%, #FD3131 100%);
  border-radius: 50%;
  margin-right: 10px;
}
/* 统计项颜色 */
.sales .yuan {
  background: linear-gradient( 180deg, #3EA1FF 0%, #005EB7 100%);
}

.purchase .yuan {
  background: linear-gradient( 180deg, #4BEAB3 0%, #00A7A0 100%);
}

.inventory .yuan {
  background: linear-gradient( 180deg, #FBAD19 0%, #FF6200 100%);
}

.finance .yuan {
  background: linear-gradient( 180deg, #FC6C6C 0%, #FD3131 100%);
}
</style>
